<!--
* Created by Sean on 2017/10/2.
* Certification
-->
<template>
  <div id="certify" class="certify">
    <x-dialog v-model="lizi" class="dialog-lizi">
      <div class="img-box">
        <img src="../../images/liezi.jpg" style="max-width:100%">
      </div>
      <div @click="lizi=false">
        <span class="vux-close"></span>
      </div>
    </x-dialog>
    <div class="step-container">
      <ul>
        <li :class="{ step: true, 'step-1': classObj.isStep1 }"><div><span>输入姓名</span></div></li>
        <li :class="{ step: true, 'step-2': classObj.isStep2 }"><div><span>实人检测</span></div></li>
        <!--<li :class="{ step: true, 'step-3': classObj.isStep3 }"><div><span>认证结果</span></div></li>-->
      </ul>
    </div>
    <box class="card-wrapper" v-if="step === 1" gap=".4rem 0" >
      <!-- <div class="card-item">
        <div class="txt">上传身份证（人像面）</div>
        <div><x-icon type="ios-plus" size="38"></x-icon></div>
      </div>
      <div class="card-item">
        <div class="txt">上传身份证（国徽面）</div>
        <div><x-icon type="ios-plus" size="38"></x-icon></div>
      </div> -->
      <group labelWidth="70px" label-align="right">
        <x-input :show-clear="false"title="姓&nbsp;&nbsp;&nbsp;名:" v-model="user.sName" :is-type="'china-name'" required placeholder="请输入姓名" placeholder-align="left"></x-input>
        <!-- <x-input :show-clear="false"title="身份号:" :min="18" :max="18"  v-model="user.sCard" required placeholder="请输入身份证号码" placeholder-align="left"></x-input> -->
        <x-input :show-clear="false"title="手机号:" v-model="user.sTel" type="tel" :max="11" :is-type="'china-mobile'" required placeholder="请输入手机号码" placeholder-align="left"></x-input>
      </group>
    </box>
    <box class="card-wrapper" v-if="step === 2" gap=".45rem 0">
      <div class="card-item card-item-1">
        <p class="font-S">请在录制中，做以下动作</p>
        <p class="font-M">先眨眨眼，再张张嘴</p>
        <x-button mini @click.native="lizi = !lizi">查看演示样例</x-button>
      </div>
    </box>
    <box class="success-wrapper" v-if="step === 3" gap=".5rem .75rem">
      <icon type="success" is-msg></icon>
      <p class="msg">&nbsp;&nbsp;实名认证成功！</p>
      <p class="info">{{user.sName}}<br><span>{{encry(user.sCard)}}</span></p>
    </box>
    <!-- <box class="btn-wrapper"><x-button type="primary" @click.native="next" :text="btnTxt"></x-button></box> -->
    <box class="btn-wrapper"><x-button type="primary" @click.native="faceValidate" :text="btnTxt"></x-button></box>
  </div>
</template>
<script>
  import { Box, Group, Icon } from 'vux'
  // import idRegEx from '@/util/regExpConfig'
  export default {
    name: 'certify',
    components: {
      Icon,
      Box,
      Group
    },
    data () {
      return {
        step: 1,
        lizi: false,
        btnTxt: '下一步',
        classObj: {
          isStep1: true,
          isStep2: false,
          isStep3: false
        },
        user: {
          sName: '',
          sCard: '',
          sTel: ''
        }
      }
    },
    created () {
      let userInfo = window.localStorage.getItem('userInfo')
      userInfo = userInfo ? JSON.parse(userInfo) : {}
      this.user.sTel = userInfo.mobile
    },
    methods: {
      next () {
        switch (this.step) {
          case 1:
            this.classObj.isStep2 = true
            this.step = 2
            this.btnTxt = '开始扫脸认证'
            break
          case 2:
            this.faceValidate()
            break
          case 3:
            this.faceValidateSuc()
            break
          default: break
        }
      },
      encry (str) {
        return `${str.substr(0, 5)}**********${str.substr(-4)}`
      },
      showLIzi () {
        this.lizi = !this.lizi
      },
      validateNameId () {
        if (this.user.sName === '' || this.user.sTel === '') {
          this.$vux.toast.text('请填写姓名，手机号')
          return false
        } else {
          return true
        }
      },
      faceValidateSuc () {
        let _this = this
        this.classObj.isStep3 = true
        this.step = 3
        this.btnTxt = '进入首页'
        console.log(_this.$api)
        let data = {mobile: this.user.sTel, trueName: this.user.sName, idCard: this.user.sCard, isValidate: 1}
        let userInfo = JSON.parse(window.localStorage.getItem('userInfo'))
        let newUserinfo = {...data, ...userInfo}
        this.$store.commit('login/login', newUserinfo)
        window.localStorage.setItem('userInfo', JSON.stringify(newUserinfo))
        window.localStorage.setItem('isValidate', 1)
        _this.$axiosPosting(_this.$api.completeValidate, data).then((res) => {
          if (res.code === '0000') {
            _this.$router.replace({ path: '/user' })
          } else {
            _this.$vux.toast.text('更新用户信息失败')
          }
        })
      },
      faceValidate () {
        /* eslint-disable */
        if (!this.validateNameId()) {
          return false
        }
        let _this = this
        let sName = this.user.sName
        let sCard = this.user.sCard
        let sTel = this.user.sTel
        if (sName == "" || sTel == "") {
          _this.$vux.toast.text('请填写姓名，手机号')
        } else {
          window.localStorage.setItem('userName', this.user.sName)
          window.localStorage.setItem('userIDCard', this.user.sCard)
          // window.location.href = `static/shualian.html#${sName}/${sCard}/${sTel}`
          this.$router.push('/twiceFace')
        }
      }
    }
  }
</script>
<style lang="less">
  .certify {
    height: 100vh;
    position: relative;
    .step-container {
      padding: .3rem 2.5rem 1.4rem;
      background: #fff;
      ul {
        display: flex;
        list-style: none;
      }
      .step {
        flex: 1 0 auto;
        position: relative;
        &>div {
          position: relative;
          z-index: 1;
          width: 1.8rem;
          height: 1.8rem;
          background: #fff;
        }
        &>div:after {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          display: block;
          width: .6rem;
          height: .6rem;
          margin-top: -.3rem;
          margin-left: -.3rem;
          background: rgba(0, 0, 0, .2);
          box-shadow: 0 0 0 .2rem rgba(0, 0, 0, .1), 0 0 0 .4rem rgba(0, 0, 0, .05);
          border-radius: 50%;
        }
        span {
          position: absolute;
          display: block;
          left: 50%;
          bottom: -.6rem;
          width: 200%;
          margin-left: -100%;
          font-size: .6rem;
          line-height: 1;
          color: #999;
          text-align: center;
        }
      }
      .step:last-child {
        flex-grow: 0;
      }
      .step:after {
        content: '';
        display: block;
        position: absolute;
        top: 50%;
        width: 100%;
        height: 0;
        margin-top: -.05rem;
        border-top: .075rem solid rgba(0, 0, 0, .2);
      }
      .step-1,
      .step-2,
      .step-3 {
        &>div:after {
          background-image: linear-gradient(0deg, rgba(0, 104, 217, 1) 0%, rgba(17, 144, 225, 1) 100%);
          box-shadow: 0 0 0 .2rem rgba(46, 118, 216, .2), 0 0 0 .4rem rgba(46, 118, 216, .1);
        }
        span {
          color: #097dde;
        }
      }
      .step-1:after,
      .step-2:after,
      .step-3:after {
        border-top-color: rgba(46, 118, 216, .4);
      }
    }
    .card-wrapper {
      .card-item {
        display: flex;
        width: 100%;
        height: 5.4rem;
        padding: 1.75rem 1.75rem 1.75rem 2rem;
        margin-bottom: .5rem;
        background: #2c71f0;
        border-radius: .1rem;
        box-sizing: border-box;
        div {
          flex: 0 0 auto;
        }
        .txt {
          flex-grow: 1;
          font-size: .7rem;
          line-height: 1.9rem;
          color: #fff;
        }
      }
      .weui-cells {
        margin-top: 0;
      }
      .weui-cells:before,
      .weui-cells:after {
        display: none;
      }
      .vux-x-icon {
        fill: #fff;
      }
      .card-item-1 {
        display: block;
        height: 7.3rem;
        padding: 1.5rem 2rem 1rem;
        text-align: center;
        p {
          margin-bottom: .7rem;
          font-size: .5rem;
          line-height: 1;
          color: #fff;
        }
        .font-M {
          margin-bottom: 1rem;
          font-size: .9rem;
        }
        .weui-btn {
          font-size: .5rem;
          color: #fff;
          border: 1px solid #fff;
          border-radius: 0;
          background: transparent;
        }
      }
      .vux-x-input {
        padding: .8rem .75rem;
        label {
          text-align: left !important;
        }
      }
    }
    .success-wrapper {
      text-align: center;
      p {
        font-size: .75rem;
        line-height: 1;
        color: #333;
        span {
          color: #999;
        }
      }
      p.msg {
        font-size: 1rem;
        color: #0068d9;
      }
      p.info {
        margin-top: 2.4rem;
        margin-bottom: 1.7rem;
        line-height: 1.2rem;
      }
      .weui-icon {
        margin-top: 2.9rem;
        margin-bottom: 1rem;
      }
    }
    .btn-wrapper {
      position: absolute;
      left: 0;
      bottom: 1rem;
      width: 100%;
      padding: 0 .5rem;
      box-sizing: border-box;
    }
  }

</style>
